/*第一屏不做大多数*/
@keyframes firstIn{
	0%{
		transform:translateZ(1000px);
	}
	100%{
		transform:translateZ(0);
	}
}
.sec1 .sec1-title{
	animation: firstIn 0.4s ease 1;
}

/*从下向上移动(公用)*/
@keyframes fadeInUp{
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}
}
.current .screen-area {
	/*延迟.5s,both指动画结束保留位置*/
	animation:fadeInUp 1s ease 1 both;
}
.current .sec1-info, .current .sec1-vip {
	animation:fadeInUp 1s ease 0.5s 1 both;
}

/**左侧内容图标向右旋转**/
@keyframes rollToRight{
	0%{
		opacity:0;
		transform:translateX(-100px) rotate(-180deg);
	}
	100%{
		opacity:1;
		transform:translateX(0) rotate(0);
	}
}
.current .icon {
	animation:rollToRight 1s ease 1 both;
}
@keyframes icon1{
	0%{
		z-index:5;
		transform:translate(0,0);
	}
	25%{
		z-index:5;
		transform:translate(230px,0) scale(1.3);
	}
	50%{
		z-index:5;
		transform:translate(400px,-95px) scale(1);
	}
	75%{
		z-index:5;
		transform:translate(320px,-230px) scale(0.8);
	}
	100%{
		z-index:1;
		transform:translate(151px,-289px) scale(0.6);
	}
}
.current .icon-1 {
	animation:icon1 0.5s linear both;
}

/*icon2*/
@keyframes icon2{
	0%{
		transform:translate(0,0) scale(1.3);
	}
	25%{
		transform:translate(170px,-95px) scale(1);
	}
	50%{
		transform:translate(90px,-230px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-79px,-290px) scale(0.6);
	}
	100%{
		z-index:1;
		transform:translate(-240px,-282px) scale(0.4);
	}
}
.current .icon-2 {
	animation:icon2 0.5s linear both;
}
/*icon3*/
@keyframes icon3{
	0%{
		transform:translate(0,0) scale(1);
	}
	25%{
		transform:translate(-80px,-135px) scale(0.8);
	}
	50%{
		z-index:1;
		transform:translate(-250px,-194px) scale(0.6);
	}
	75%{
		z-index:1;
		transform:translate(-410px,-187px) scale(0.4);
	}
	100%{
		z-index:5;
		transform:translate(-570px,-150px) scale(0.5);
	}
}
.current .icon-3 {
	animation:icon3 0.5s linear both;
}
/*icon4*/
@keyframes icon4{
	0%{
		transform:translate(0,0) scale(0.8);
	}
	25%{
		transform:translate(-168px,-59px) scale(0.6);
	}
	50%{
		z-index:1;
		transform:translate(-330px,-52px) scale(0.4);
	}
	75%{
		z-index:1;
		transform:translate(-490px,-15px) scale(0.5);
	}
	100%{
		z-index:5;
		transform:translate(-590px,85px) scale(0.6);
	}
}
.current .icon-4 {
	animation:icon4 0.5s linear both;
}
/*icon5*/
@keyframes icon5{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		z-index:1;
		transform:translate(-160px,7px) scale(0.4);
	}
	50%{
		z-index:5;
		transform:translate(-320px,44px) scale(0.5);
	}
	75%{
		z-index:5;
		transform:translate(-420px,144px) scale(0.6);
	}
	100%{
		z-index:5;
		transform:translate(-340px,239px) scale(0.7);
	}
}
.current .icon-5 {
	animation:icon5 0.5s linear both;
}
@keyframes icon6{
	0%{
		transform:translate(0,0) scale(0.4);
	}
	25%{
		z-index:1;
		transform:translate(-160px,37px) scale(0.5);
	}
	50%{
		z-index:5;
		transform:translate(-260px,137px) scale(0.6);
	}
	75%{
		z-index:5;
		transform:translate(-180px,232px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(10px,282px) scale(1);
	}
}
.current .icon-6 {
	animation:icon6 0.5s linear both;
}
@keyframes icon7{
	0%{
		transform:translate(0,0) scale(0.7);
	}
	25%{
		transform:translate(190px,50px) scale(1);
	}
	50%{
		transform:translate(420px,50px) scale(1.3);
	}
	75%{
		transform:translate(590px,-45px) scale(1);
	}
	100%{
		transform:translate(510px,-180px) scale(0.8);
	}
}
.current .icon-7 {
	animation:icon7 0.5s linear both;
}
@keyframes icon8{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		transform:translate(80px,96px) scale(0.7);
	}
	50%{
		transform:translate(270px,145px) scale(1);
	}
	75%{
		transform:translate(500px,145px) scale(1.3);
	}
	100%{
		transform:translate(670px,51px) scale(1);
	}
}
.current .icon-8 {
	animation:icon8 0.5s linear both;
}
@keyframes icon9{
	0%{
		transform:translate(0,0) scale(0.5);
	}
	25%{
		transform:translate(-100px,100px) scale(0.6);
	}
	50%{
		transform:translate(-20px,195px) scale(0.7);
	}
	75%{
		transform:translate(170px,245px) scale(1);
	}
	100%{
		transform:translate(400px,245px) scale(1.3);
	}
}
.current .icon-9 {
	animation:icon9 0.5s linear both;
}
/*第三屏*/
/*fadeInLeft显示器*/
@keyframes fadeInLeft{
	0%{
		opacity:0;
		transform:translateX(-10px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
.current .icon-monitor {
	animation:fadeInLeft 0.5s ease both;
}
/*fadeInUp2卡通人物*/
@keyframes fadeInUp2{
	0%{
		opacity:0;
		transform:translateY(10px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
.current .icon-character1 {
	/*延迟.4秒出现，卡通人物1*/
	animation:fadeInUp2 0.5s ease 0.4s both;
}
.current .icon-character2 {
	/*延迟0.5s卡通人物2*/
	animation:fadeInUp2 0.5s ease 0.5s both;
}
.current .icon-character3 {
	/*延迟0.6秒卡通人物3*/
	animation:fadeInUp2 0.5s ease 0.6s both;
}
.current .icon-character5 {
	/*延迟0.8秒fadeInLeft出现卡通人物4*/
	animation:fadeInLeft 0.5s ease 0.8s both;
}
/*fadeIn*/
@keyframes fadeIn{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;;
	}
}
.current .icon-shine {
	/*显示器的黄色光芒*/
	animation:fadeIn 0.5s ease 0.2s both;
}
/*另外三个动画*/
.current .icon-car {
	/*车*/
	animation:fadeInLeft 0.8s ease 1.2s both;
}
.current .icon-flame {
	animation:fadeIn 0.5s ease 1s both;
}
.current .light {
	
	animation:fadeIn 0.8s ease 1.2s both;
}

/*第四屏动画*/
@keyframes rotateAndZoomOut{
	0%{
		transform:rotate(-90deg) scale(0);
		opacity:0.5;
	}
	100%{
		transform:rotate(0) scale(1);
		opacity:1;
	}
}
.current .figure2-list {
	/*几个小物件旋转出来*/
	animation:rotateAndZoomOut 0.8s ease both;
}
/*随机移动动画*/
@keyframes randomMove1{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(5px,3px);
	}
	50%{
		transform:translate(8px,0);
	}
	75%{
		transform:translate(5px,-5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
.current .icon-watch, .current .icon-shoe, .current .icon-bag, .current .icon-hat {
	/*循环用动画*/
	animation:randomMove1 5s linear infinite;
}
/*随机移动2*/
@keyframes randomMove2{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-5px,-3px);
	}
	50%{
		transform:translate(-8px,0);
	}
	75%{
		transform:translate(-5px,5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
.current .icon-headset, .current .icon-glasses, .current .icon-perfume, .current .icon-dress {
	animation:randomMove2 5s linear infinite;
}
/*第五屏*/
/*bounceIn*/
@keyframes bounceIn{
	0%,20%,40%,60%,80%,100%{
		transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:scale3D(0.3,0.3,0.3);
	}
	20%{
		transform:scale3D(1,1,1);
	}
	40%{
		transform:scale3D(0.9,0.9,0.9);
	}
	60%{
		opacity:1;
		transform:scale3D(1.03,1.03,1.03);
	}
	80%{
		transform:scale3D(0.97,0.97,0.97);
	}
	100%{
		opacity:1;
		transform:scale3D(1,1,1);
	}
}
.current .icon-dialog1 {
	animation:bounceIn 0.8s ease both;
}
.current .icon-dialog2 {
	animation:bounceIn 0.8s ease 0.5s both;
}
/*bounceInLeft*/
@keyframes bounceInLeft{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(-100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(-10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
.current .icon-bear {
	animation:bounceInLeft 0.8s ease both;
}
.current .icon-qana {
	animation:bounceInLeft 0.8s ease 0.5s both;
}
/*bounceInRight*/
@keyframes bounceInRight{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(-20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(-5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
.current .icon-babyq {
	animation:bounceInRight 0.8s ease 0.1s both;
}